<!--
*  2021-03-15
*  查看余纱详情
-->
<template>
  <div id="app" class="detail-check">
    <!-- 头部导航 -->
    <van-nav-bar
      ref="header"
      left-text="返回"
      left-arrow
      title="余纱详情"
      @click-left="onClickLeft"
    >
    </van-nav-bar>

    <!-- 滚动 -->
    <better-scroll
      class="public-scroll"
      :data="tableData"
      :totalPage="totalPage"
    >
      <van-cell-group v-show="tableData.length !== 0">
        <van-cell
          v-for="(data, index) in tableData"
          :key="index"
          :title="'编号: ' + data.standardNo"
        >
          <template slot="label">
            <div class="detail-check-wrapper">
              <div class="detail-check-cell">
                <span>色号: {{ data.yarnNo }}</span>
                <span
                  >规格:
                  {{ data.yarnStandard + "/" + data.yarnStrandNum }}</span
                >
                <span>总量: {{ data.weight }}</span>
              </div>
              <div
                v-show="data.items && data.items.length !== 0"
                v-for="(item, key) in data.items"
                :key="key"
                class="detail-check-cell"
              >
                <span>沙包ID: {{ item.id }}</span>
                <span>重 量: {{ item.weight }}</span>
                <span>状 态: {{ $getPackageStatus(item.status) }}</span>
              </div>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        v-show="tableData.length === 0"
        description="暂无数据"
      />
    </better-scroll>
  </div>
</template>

<script>
import { openWin } from "@/utils/index";
import { getWeavingPlan } from "@/api/yarn";

export default {
  name: "weavingInboundSurplusDetailCheck",
  data() {
    return {
      title: "余纱详情",
      currentPage: 1,
      totalPage: 1,
      tableData: [],
      resUrl: "",
      doingResUrl: "",
      stepId: "",
    };
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    //初始化
    initFn(that) {
      that.resUrl = window.api.pageParam.resUrl;
      that.doingResUrl = window.api.pageParam.doingResUrl;
      that.stepId = window.api.pageParam.stepId;
      that.onGetTableData();
      window.api.addEventListener({
        name:'viewdisappear'
      }, function() {
        window.api.closeWin();
      });
    },
    // 返回
    onClickLeft() {
      openWin("surplusYarn-detail", {
        resUrl: this.resUrl,
        url: this.doingResUrl,
        resId: this.stepId,
      });
    },
    // 获取详情数据
    onGetTableData() {
      const that = this;
      that.tableData = [];
      getWeavingPlan(
        {
          resUrl: that.doingResUrl + "&type=2",
        },
        (res) => {
          console.log(res);
          that.tableData = res;
          let i = 0;
          let len = that.tableData.length;
          that.onGetLoopWeight(i, len);
        }
      );
    },
    // 循环获取重量
    onGetLoopWeight(i, len) {
      const that = this;
      that.tableData[i].items = [];
      getWeavingPlan(
        {
          resUrl:
            process.env.VUE_APP_YARN_URL +
            that.resUrl +
            "?refType=11&refId=" +
            that.tableData[i].id,
        },
        (res) => {
          let totalWeight = 0;
          let packageIds = "";

          if (res instanceof Array) {
            that.tableData[i].items = res;
            res.forEach((item) => {
              totalWeight += Number(item.weight);
              packageIds += "," + item.id;
            });
          }
          that.tableData[i].weight = totalWeight;
          that.tableData[i].packageIds =
            packageIds !== "" ? packageIds.substr(1) : "";
          that.$forceUpdate();
          ++i;
          if (i < len) {
            that.onGetLoopWeight(i, len);
          }
        }
      );
    },
  },
};
</script>

<style lang="scss">
.detail-check {
  // padding-top: 22px;
  .public-scroll {
    height: calc(100vh - 44px);
    overflow: hidden;

    .detail-check-cell {
      display: flex;
      justify-content: space-between;
      span {
        display: block;
        flex: 0 0 33%;
        &:nth-child(2) {
          text-align: center;
        }
        &:last-child {
          text-align: right;
        }
      }
    }
  }
}
</style>
